<script setup>
import { ref } from 'vue'
import { showToast } from 'vant';
import { useRouter } from 'vue-router';
import { useUserStore } from '@/store';

import BiPopup from '@/components/biPopup/index.vue'

const userStore = useUserStore()

const props = defineProps({
    cash: {
        type: [String, Number],
        default: 0,
        required: true
    } // 已获取金额
})

const router = useRouter()

const cashPopup = ref(false)
function handleOpenCashPopup() {
    cashPopup.value = true
}
function handleCloseCashPopup() {
    cashPopup.value = false
}

function handleToWithdrawCash() {
    if (!userStore.finishNewbieTask) {
        showToast('Unable to withdraw funds without completing the novice benefits')
        return
    }

    if (props.cash < 1) {
        handleOpenCashPopup()
        return
    }

    router.push({ path: '/input', query: {
        withdrawType: 2, // 现金提现
        balance: props.cash
    } })
}

</script>

<template>
    <div class="invited-reward">
        <div class="container">
            <h3 class="title">Account Balance</h3>
            <div class="content">
                <div class="content-grid">
                    <div class="content-grid-item">
                        <span class="content-grid-item_num">${{ props.cash || 0 }}</span>
                    </div>
                    <div class="content-grid-item">
                        <img src="@/assets/imgs/exchange/logo_big.png" alt="paypal_icon" width="70">
                        <div class="content-grid-item_btn" @click="handleToWithdrawCash">
                            <span>Exchange</span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <BiPopup v-model:show="cashPopup" type="withdraw" :withdrawStatus="false" button-text="Invitation rules" @click="handleCloseCashPopup">
        <div class="failed">
            <span>Cash:  ({{props.cash}}/1)</span>
        </div>
    </BiPopup>

</template>

<style scoped lang="scss">
.invited-reward {
    width: 100%;
    padding: 3vmin;
    padding-top: 0;

    .container {
        display: flex;
        flex-direction: column;
        align-items: center;
        background: linear-gradient(to bottom, #F797A2, 50%, #FE567E);
        border-radius: 3vmin;
        padding: 2.5vmin 1.2vmin;

        .title {
            display: block;
            width: 100%;
            text-align: center;
            font-size: var(--middle-font-size);
            color: #ffffff;
            font-weight: bold;
        }

        .content {
            width: 62.5vmin;
            background-color: #ffffff;
            border-radius: 3vmin;
            margin-top: 1vmin;

            &-grid {
                display: grid;
                grid-template-columns: repeat(2, 1fr);
                grid-auto-rows: 20vmin;
                padding: 1.5vmin 0;

                &-item {
                    display: flex;
                    flex-direction: column;
                    justify-content: space-evenly;
                    align-items: center;

                    &:first-child {
                        border-right: 1px solid #A6A6A6;
                    }

                    &_title {
                        text-align: center;
                        font-size: var(--small-font-size);
                        color: #1d1d1f;
                    }

                    &_num {
                        font-size: 9vmin;
                        font-weight: bold;
                        color: var(--task-color);
                    }

                    &_btn {
                        display: flex;
                        justify-content: center;
                        align-items: center;
                        width: 70%;
                        height: 7vmin;
                        background: linear-gradient(to bottom, #F58892, #EF3461);
                        border-radius: 999px;

                        span {
                            font-size: var(--mini-font-size);
                            color: #ffffff;
                        }
                    }

                    &>img {
                        width: 13vmin;
                        object-fit: contain;
                    }
                }
            }
        }
    }
}

.failed {
    @extend %withdrawFail;
}
</style>